<script lang="ts" setup>
import { defineEmits, ref, computed } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, Descriptions, message, Space } from 'ant-design-vue'

// 定义要发送的事件
type EmitEvents = {
  pushData: {}
}
const emit = defineEmits<EmitEvents>()
const form = ref({})
// const allItems = computed(() => {
//   return Object.values(form.value).flatMap(priceItem => priceItem.updateData || [])
// })

const reason = ref('')

const [Modal, modalApi] = useVbenModal({
  class: 'w-full max-w-5xl',
  footer: false,
  onCancel() {
    modalApi.close()
  },
  onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const { data } = modalApi.getData<Record<string, any>>()
    console.log(data)
    form.value = data
  },
})

/**
 * 处理推送按钮点击事件
 */
function handlePush(row: any) {

  // 发送数据到父组件，确保总是数组格式
  emit('pushData')
  modalApi.close()
}
</script>

<template>
  <Modal title="物料采购单明细修改">
    <!-- 商品价格变更 -->
      <template v-for="item in form" :key="item">
      <Descriptions :column="2" bordered style="width: 100%; min-width: 800px;margin-bottom: 10px;" size="small">
         <Descriptions.Item label="信息" span="2">{{ item.appendInfo }}</Descriptions.Item>
        <template v-for="it in item.updateData" :key="it.field">
          <Descriptions.Item :label="it.fieldName">
            <div>改前:{{ it.oldValue }}</div>
            <div style="color: red;">改后:{{ it.newValue }}</div>
          </Descriptions.Item>    
        </template>
       
      </Descriptions>
</template>
    <div class="modal-footer">
      <Space>
        <Button @click="modalApi.close()">取消</Button>
        <Button type="primary" @click="handlePush(form)">确认提交</Button>
      </Space>
    </div>
  </Modal>
</template>
<style lang="scss" scoped>

.modal-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}


</style>
